<template>
	<u-popup mode="bottom" :value="value" border-radius="20" :safe-area-inset-bottom="true" @close="close">
		<view class="popup">
			<view class="popup-title" v-if="title">{{title}}</view>
			<scroll-view class="popup-radio-group" :scroll-y="true" :scroll-top="scrollTop">
				<u-radio-group v-model="curRadio" active-color="#2b8ac9" size="40">
					<view class="popup-radio-group-item" v-for="(item,index) in list" :key="index"
						@click="handleChnageRadio(item.name)">
						<text>{{item.name}}</text>
						<u-radio :name="item[valueKey]"></u-radio>
					</view>
					<view class="popup-radio-group-item other" key="other" @click="handleChnageRadio(other)">
						<text>{{other}}<text class="other-required" v-show="curRadio == other">（必填）</text></text>
						<u-radio :name="other"></u-radio>
					</view>
				</u-radio-group>

				<input class="input-other" v-model="otherValue" placeholder-style="color:#BBBFC2;"
					:placeholder="$t('my.pleaseInput')" v-show="curRadio == other" />
			</scroll-view>
			<view class="popup-foot">
				<u-button type="primary" shape="circle" @click="handleConfirm">
					{{$t('my.save')}}
				</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "RadioGroupPopup",
		props: {
			value: {
				type: Boolean,
				required: true
			},
			title: {
				type: String,
				default: ""
			},
			list: {
				type: Array,
				required: true
			},
			valueKey: {
				type: String,
				default: "name"
			},
			defaultValue: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				curRadio: "",
				otherValue: "",
				scrollTop: 0,
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		computed: {
			other() {
				return this.$t('other');
			}
		},
		watch: {
			value(v) {
				if (v) {
					this.otherValue = "";
					this.scrollTop = 0;
					let index = this.list.findIndex(item => item[this.valueKey] == this.defaultValue);
					if (index >= 0) {
						this.curRadio = this.defaultValue;
					} else if (!!this.defaultValue && index < 0) {
						this.curRadio = this.other;
						this.otherValue = this.defaultValue;
					} else {
						this.curRadio = ""
					}
					// console.log(index, this.list,"默认值", this.curRadio,this.defaultValue);
				}
			}
		},
		created() {

		},
		methods: {
			close() {
				this.$emit('input', false);
			},
			handleChnageRadio(value) {
				this.curRadio = value;
				if (value == this.other) {
					this.scrollBottom();
				}
			},

			scrollBottom() {
				setTimeout(() => {
					this.scrollTop = this.scrollTop < 999 ? 999 : this.scrollTop + 1;
				}, 10)
			},
			handleConfirm() {
				if (this.curRadio == this.other) {
					this.$emit('confirm', this.otherValue, 1);
				} else {
					this.$emit('confirm', this.curRadio, 0);
				}
				this.close();
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup {
		.other-required {
			color: #BBBFC2;
			font-size: 28rpx;
		}

		.input-other {
			margin-left: 50rpx;
			padding-left: 22rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid $u-border-color;
			color: $u-content-color;
			font-size: 32rpx;
		}

		&-title {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #0C101F;
			padding: 40rpx 0;
			text-align: center;
		}

		::v-deep .u-radio-group {
			@include flexCenter;
			flex-direction: column;
		}

		::v-deep .u-radio__label {
			display: none;
		}

		&-radio-group {
			max-height: 500rpx;
			padding-bottom: 110rpx;

			&-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;
				width: 646rpx;
				// margin: 0 20rpx;
				// margin:0 50rpx;
				border-bottom: 1px solid $u-border-color;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: $u-content-color;

				&.other {
					border: 0;
				}
			}
		}

		&-foot {
			padding: 5rpx 30rpx 0;
			width: 100%;
			height: 80rpx;
			box-shadow: 0rpx -8rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
			margin-top: 10rpx;
		}
	}
</style>